<template>
	<div class="p-4">
		<a-row>
			<a-col span="6">
				<a-form-item label="统计时间">
					<JDictSelectTag type="select" v-model:value="selectDayTypeValue" dictCode="statistics_data_echart"
						placeholder="请选择字典下拉" @change="selectType" />
				</a-form-item>
			</a-col>
			<a-col span="8">
				<a-date-picker v-model:value="day" @change="selectDay" :format="dateFormat"
					v-if="selectDayTypeValue==1" />
				<a-date-picker v-model:value="week" picker="week" @change="selectWeek" v-if="selectDayTypeValue==2" />
				<a-date-picker v-model:value="month" picker="month" @change="selectMonth"
					v-if="selectDayTypeValue==3" />
				<a-date-picker v-model:value="quarter" picker="quarter" @change="selectQuarter"
					v-if="selectDayTypeValue==4" />
				<a-date-picker v-model:value="year" picker="year" @change="selectYear" v-if="selectDayTypeValue==5" />
				<a-range-picker v-model:value="rangeDate" @change="selectRange" v-if="selectDayTypeValue==6" />
			</a-col>

			<!-- <BasicForm @register="registerForm" style="dispaly:flex;" /> -->
		</a-row>
		<a-row>
			<a-col span="8">
				<realTimeData></realTimeData>
			</a-col>
			<a-col span="8">
				<transactionFormula></transactionFormula>
			</a-col>
			<a-col span="8">
				<paymentProfile></paymentProfile>
			</a-col>
			<a-col span="8">
				<perCustomerTransaction></perCustomerTransaction>
			</a-col>
			<a-col span="8">
				<flowProfile></flowProfile>
			</a-col>
			<a-col span="8">
				<newAndOldClients></newAndOldClients>
			</a-col>
			<a-col span="8">
				<distributorProfile></distributorProfile>
			</a-col>
			<a-col span="8">
				<distributorSuccessPrice></distributorSuccessPrice>
			</a-col>
			<a-col span="8">
				<movingGoodsNum></movingGoodsNum>
			</a-col>
			<a-col span="24">
				<top5Pdt></top5Pdt>
			</a-col>
		</a-row>
	</div>
</template>

<script lang="ts" setup>
	import { BasicForm, useForm } from '/@/components/Form/index';
	import { DatePicker } from 'ant-design-vue';
	import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
	import JRangeDate from '/@/components/Form/src/jeecg/components/JRangeDate.vue';
	import { ref } from 'vue';
	import dayjs, { Dayjs } from 'dayjs';
	import { getData, formSchema } from './chartdemo.data.ts';
	import realTimeData from './components/realTimeData.vue';
	import transactionFormula from './components/transactionFormula.vue';
	import paymentProfile from './components/paymentProfile.vue';
	import perCustomerTransaction from './components/perCustomerTransaction.vue';
	import flowProfile from './components/flowProfile.vue';
	import newAndOldClients from './components/newAndOldClients.vue';
	import top5Pdt from './components/top5Pdt.vue';
	import movingGoodsNum from './components/movingGoodsNum.vue';
	import distributorSuccessPrice from './components/distributorSuccessPrice.vue';
	import distributorProfile from './components/distributorProfile.vue';
	const dateFormat = 'YYYY-MM-DD';
	const value1 = ref<Dayjs>(dayjs(getNowDay(), dateFormat));

	let selectDayTypeValue = ref('1'),
		year = ref<Dayjs>(),
		quarter = ref(''),
		month = ref<Dayjs>(),
		day = dayjs(getNowDay(), dateFormat),
		week = ref<Dayjs>(),
		rangeDate = ref<[Dayjs, Dayjs]>();
	let r, q, w, y, m, d;

	const selectRange = (date : Moment, dateString : string[]) => {
		r = dateString
	};

	const selectQuarter = (date : Moment, dateString : string[]) => {
		q = dateString
	};
	const selectWeek = (date : Moment, dateString : string[]) => {
		w = dateString
	};
	const selectYear = (date : Moment, dateString : string[]) => {
		y = dateString
	};
	const selectMonth = (date : Moment, dateString : string[]) => {
		m = dateString
	};
	const selectDay = (date : Moment, dateString : string[]) => {
		d = date
	};
	function getNowDay() {
		var currentDate = new Date();
		// 获取年、月、日、小时、分钟和秒
		var year1 = currentDate.getFullYear();
		var month1 = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要加1，并补零
		var day1 = currentDate.getDate().toString().padStart(2, '0'); // 补零

		return year1 + '-' + month1 + '-' + day1;
	}

	function selectType(e) {
		if (e == 1) {
			if (d) {
				console.log('搜索')
			}

		} else if (e == 2) {
			if (w) {
				console.log('搜索')
			}
		} else if (e == 3) {
			if (m) {
				console.log('搜索')
			}
		} else if (e == 4) {
			if (q) {
				console.log('搜索')
			}
		} else if (e == 5) {
			if (y) {
				console.log('搜索')
			}
		} else if (e == 6) {
			if (r) {
				console.log('搜索')
			}
		}

	}




	const activeKey = ref('1');
	const { barDataSource, barMultiData, pieData, barLineData, radarData } = getData;
	const multiBarOption = {
		title: { text: '多列柱状图', left: 'center' },
	};
	const rankList = loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店');
	//tab切换
	function tabChange(key) {
		console.log('切换的key:', key);
	}
	function loadData(x, y, max, min, before = '', after = '月') {
		let data = [];
		for (let i = 0; i < 12; i += 1) {
			data.push({
				[x]: `${before}${i + 1}${after}`,
				[y]: Math.floor(Math.random() * max) + min,
			});
		}
		return data;
	}
</script>
<style>
	.ant-col .ant-form-item-label {
		width: 40%;
	}

	.ant-col .ant-form-item-control {
		width: 60%;
	}
</style>